body{
    background: #ccc;
}

// 头部轮播图
header{
    width: 100%;
    height: 95px;
    background: aqua;

    .banner{
        width: 100%;
        height: 95px;
        .swiper {
            width: 100%;
            height: 95px;
            font-size: 0;
            .img1{
                width: 100%;
                height: 95px;
                background: url('../../assets/imgs/running.jpg') no-repeat;
                background-size: cover;
            }
            .img2{
                width: 100%;
                height: 95px;
                background: url('../../assets/imgs/running2.jpg') no-repeat;
                background-size: cover;
            }
            .img3{
                width: 100%;
                height: 95px;
                background: url('../../assets/imgs/course-img02.png') no-repeat;
                background-size: cover;
            }
        } 
    }
}



 


//首页的less
main{
    width: 100%;
    height: 100%;
    // 用户名
    .user-name{
        width: 100%;
        height: 209px;
        background: #fff;

        .portrait{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 150px;

           .header-imgs{
            position: relative;
            width: 108px;
            height: 108px;
            border: 2px solid rgba(66, 148, 255, 100);
            border-radius: 50%;
            font-size: 0;

                img{
                    width: 108px;
                    height: 108px;
                    border-radius: 50%;
                }
                .vipImg{
                    position: absolute;
                    bottom: 0;
                    right: -10px;
                    font-size: 20px;    
                }
           } 
           .user-text{
            flex: 1;
            height: 100px;
            font-size: 20px;
            text-indent: 30px;
            text-align: left;
            line-height: 100px;
           }
           .user-btn{
            width: 50px;
            height: 100px;
            font-size: 36px;
            text-indent: 20px;
            text-align: left;
            line-height: 100px;
            color: rgba(204, 204, 204,.5);
           }
        }
        .signature{
            width: 100%;
            height: 25px;
            font-size: 14px;
            color: rgb(134, 127, 127);
        }


    }
    // 打卡
    .clock{
        margin-top: 10px;
        width: 100%;
        height: 80px;
        background: #fff;

        .clock-box{
            display:flex;
            justify-content:space-between;
            align-items: center;
            width: 100%;
            height: 80px;
            font-size: 18px;
            
            

            i{
                font-size: 40px;
                margin-right: 15px;
                // color: aqua;
            }
            .clock-text{
                flex: 1;
                text-align: left;

                .day{
                    font-weight: bold;
                    font-size: 30px;
                    color: #AAD9F7;
                }
            }
            .today-clock{
                width: 100px;
                height: 40px;
                font-weight: bold;
                font-size: 18px;
                text-align: center;
                line-height: 40px;
                color: #004E73;
                background:  #AAD9F7 ;
                border-radius: 20px;
            }
        }
    }
    // 个人动态
    .state{
        margin-top: 10px;
        width: 100%;
        height: 80px;
        background: #fff;

        .motion-box{
            display:flex;
            justify-content:space-between;
            align-items: center;
            width: 100%;
            height: 80px;  
            font-size: 18px;
            
                i{
                    font-size: 40px;
                    margin-right: 15px;
                    // color: aqua;
                }

                .state-text{
                    flex: 1;
                    text-align: left;
                }

                .state-btn{
                    width: 100px;
                    height: 40px;
                    font-weight: bold;
                    font-size: 18px;
                    text-align: center;
                    line-height: 40px;
                    border-radius: 20px;

                    span{
                         color: rgb(134, 127, 127);
                    }
                }
        }


    }

    // 运动数据
    .motion{
        margin-top: 10px;
        width: 100%;
        height: 176px;
        background: #fff;


        .top-box{
        width: 100%;
        height: 60px;

            .motion-box{
                width: 100%;
                height: 60px;
                display:flex;
                justify-content:space-between;
                align-items: center;
                width: 100%;
                height: 60px;  
                font-size: 18px;

                i{
                font-size: 40px;
                margin-right: 15px;
                } 
                .text{
                    flex: 1;
                    text-align: left;
                } 
                .btn{
                    width: 70px;
                    height: 40px;
                    font-weight: bold;
                    font-size: 18px;
                    text-align: center;
                    line-height: 40px;
                    border-radius: 20px;
                    color: rgb(134, 127, 127);
                }
            }

        }
        
        .bottom-box{
            display: flex;
            width: 100%;
            height: 100px;

            .all-motion{
                margin-bottom: 20px;
                width:calc(50% - 1px);
                min-height: 20px; 
                border-right: 1px solid #ccc;

                .title{
                    width: 100%;
                    height: 20px;
                    color: #ccc;

                   

                }
                .text{
                    width:100%;
                    height: 20px; 

                }
                .text>span:nth-child(1){
                    font-size: 45px;
                    color: rgba(66, 148, 255, 100);
                }

            }
            .week-motion{
                width: 50%;
                height: 100px;
                text-indent: 15px;

                .title{
                    width: 100%;
                    height: 20px;
                    color: #ccc;
                }
                .text{
                    width:100%;
                    height: 20px; 

                }
                .text>span:nth-child(1){
                    font-size: 45px;
                    color: rgba(66, 148, 255, 100);
                }
            }
        }

    }
    // 我的运动徽章
    .badge{
        margin-top: 10px;
        width: 100%;
        min-height: 100px;
        background: #fff;

       .badge-box{
        width: 100%;
        min-height: 100px;

            .badge-top{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 60px; 

                    i{
                    font-size: 40px;
                    margin-right: 15px;
                    } 
                    .text{
                        flex: 1;
                        text-align: left;
                    } 
                    .btn{
                        width: 70px;
                        height: 40px;
                        font-weight: bold;
                        font-size: 18px;
                        text-align: center;
                        line-height: 40px;
                        border-radius: 20px;
                    }
            }
            .badge-bottom{
                display: flex;
                justify-content: space-around;
                align-content: space-around;
                width: 100%;
                min-height: 150px; 

                .badge-one{
                    width: 80px;
                    height: 80px; 
                    border-radius: 50%;
                }
                .badge-one1{
                   background: url('../../assets/imgs/mybadge03.jpg') no-repeat;
                   background-size: cover;
                }
                .badge-one2{
                    background: url('../../assets/imgs/mybadge06.jpg') no-repeat;
                   background-size: cover;
                }
                .badge-one3{
                    background: url('../../assets/imgs/mybadge01.jpg') no-repeat;
                   background-size: cover;
                }
            }

       } 
    }

    .quitbtn{
        margin-top: 20px;
        width: 100%;
        color: rgba(66, 148, 255, 100);
    }
}
// text
// 公用页脚
body footer {
    width: 100%;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
  }
  body footer .footerBox {
    flex: 1;  
    width: 15%;
    height:60px;
    text-align: center;
    background: #fff;
  }
  body footer .footerBox .iconfont {
    font-size: 35px;
  }
  .ftxt{
      color: #3975ce;
  }
  body{
      overflow: hidden;
      line-height: 1.2;
      
  }